<template>
  <div class="common-wrap">
    <MyForm
      v-model:formData="formData"
      v-model:columns="formColumns"
      :rules="rules"
      :labelWidth="110"
      :saveBtnLoading="saveBtnLoading"
      background="#fff"
      formBgColor="#fff"
      @submit="onSubmit"
    >
    </MyForm>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as api from "@/api/index.js";
import i18n from "@/lang/index.js";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
const route = useRoute();
import { getSubZhEn, columnFilters } from "@/utils/mUtils.js";
const props = defineProps({
  currRow: {
    type: Object,
    default: () => null,
  },
  isType: {
    type: String,
    default: "add",
  },
});
defineOptions({
  name: "BookingManagementAdd",
});
const emits = defineEmits(["onSubmit"]);
const formData = ref({});
const formColumns = ref([
  {
    title: "",
    structure: [
      {
        content: [
          {
            x: 18,
            y: 0,
            w: 6,
            h: 1,
            i: "1",
            label: "订舱编号",
            prop: "bookingNo",
            type: "label_input",
            placeholder: "请输入订舱编号",
            disabled: true,
          },
          {
            x: 0,
            y: 1,
            w: 6,
            h: 1,
            i: "2",
            label: "委托单位",
            prop: "customerCode",
            type: "remote_select",
            placeholder: "请选择委托单位",
            params: {
              searchKey: "keyword",
              keyValue: "customerCode",
              name: "customerNameZh",
              abbreviation: "customerCode",
              showCustomizedOption: true,
              displayKey: {
                coopTypeStr: "coopTypeStr",
                customerAbbr: "customerAbbr",
              },
              fixedParams: {
                coopType: "0",
              },
            },
            paramsKey: {
              customerNameZh: "customerNameZh",
            },
            apiModule: api.default.common.customers.selectAllCoopList,
            handleRemoteChange: (val, data, c) => {
              if (!val) return;
              customerGetInfo(data.customerCode);
            },
          },
          {
            x: 6,
            y: 1,
            w: 6,
            h: 1,
            i: "3",
            label: "L/F",
            prop: "containerTypeCode",
            name: "containerTypeName",
            options: [],
            props: {
              value: "subCode",
              label: "subName",
            },
            type: "label_select",
            placeholder: "请选择L/F",
          },
          {
            x: 0,
            y: 2,
            w: 6,
            h: 1,
            i: "4",
            label: "船期编号",
            prop: "scheduleNo",
            type: "remote_select",
            placeholder: "请选择船期编号",
            params: {
              searchKey: "scheduleNo",
              keyValue: "scheduleNo",
              name: "scheduleNo",
              abbreviation: "lineDetailCode",
              showCustomizedOption: true,
              displayKey: {
                providerName: "providerName",
                loadingPortName: "loadingPortName",
                deliveryPortName: "deliveryPortName",
              },
            },
            paramsKey: {
              vesselName: "vesselName",
              lineName: "lineName",
              lineDetailCode: "lineDetailCode",
              providerName: "providerName",
              providerCode: "providerCode",
              voyageNo: "voyageNo",
              loadingPortName: "loadingPortName",
              loadingPortCode: "loadingPortCode",
              estimatedTimeDeparture: "estimatedTimeDeparture",
              actualTimeDeparture: "actualTimeDeparture",
              dischargePortName: "dischargePortName",
              dischargePortCode: "dischargePortCode",
              deliveryPortName: "deliveryPortName",
              deliveryPortCode: "deliveryPortCode",
              estimatedTimeArrivalDischarge: "estimatedTimeArrivalDischarge",
              actualTimeArrivalDischarge: "actualTimeArrivalDischarge",
              estimatedTimeArrivalDelivery: "estimatedTimeArrivalDelivery",
              actualTimeArrivalDelivery: "actualTimeArrivalDelivery",
              portOpeningTime: "portOpeningTime",
              estimatedStuffingTime: "estimatedStuffingTime",
              shippingInstructionCutoffTime: "shippingInstructionCutoffTime",
              containerYardClosingTime: "containerYardClosingTime",
              customsClosingTime: "customsClosingTime",
              cargoReceivingCutoffTime: "cargoReceivingCutoffTime",
              verifiedGrossMassCutoffTime: "verifiedGrossMassCutoffTime",
            },
            apiModule: api.default.oceanFreight.sailingSchedule.list,
          },
          {
            x: 0,
            y: 0,
            w: 6,
            h: 1,
            i: "5",
            label: "干线名称",
            prop: "lineName",
            disabled: true,
            type: "label_input",
          },
          {
            x: 0,
            y: 4,
            w: 6,
            h: 1,
            i: "6",
            label: "航线代码",
            prop: "lineDetailCode",
            type: "label_input",
            placeholder: "请输入航线代码",
            disabled: true,
          },

          {
            x: 0,
            y: 3,
            w: 6,
            h: 1,
            i: "7",
            label: "船公司",
            prop: "providerName",
            type: "label_input",
            placeholder: "请输入船公司",
            disabled: true,
          },

          {
            x: 0,
            y: 5,
            w: 6,
            h: 1,
            i: "8",
            label: "航名/航次",
            type: "label_multiple_input",
            options: [
              {
                prop: "vesselName",
                disabled: true,
                width: "calc(50% - 5px)",
                marginRight: "5px",
              },
              {
                prop: "voyageNo",
                disabled: true,
                width: "50%",
                marginRight: "0",
              },
            ],
          },
          {
            x: 0,
            y: 6,
            w: 6,
            h: 1,
            i: "9",
            label: "起运港",
            type: "label_multiple_input",
            options: [
              {
                prop: "loadingPortCode",
                disabled: true,
                width: "calc(50% - 5px)",
                marginRight: "5px",
              },
              {
                prop: "loadingPortName",
                disabled: true,
                width: "50%",
                marginRight: "0",
              },
            ],
          },
          {
            x: 0,
            y: 9,
            w: 6,
            h: 1,
            i: "10",
            label: "ETD/ATD",
            type: "label_multiple_date",
            options: [
              {
                prop: "estimatedTimeDeparture",
                disabled: true,
                format: "YYYY-MM-DD",
                valueFormat: "YYYY-MM-DD",
                dateType: "date",
                width: "calc(50% - 5px)",
                marginRight: "5px",
              },
              {
                prop: "actualTimeDeparture",
                disabled: true,
                format: "YYYY-MM-DD",
                valueFormat: "YYYY-MM-DD",
                dateType: "date",
                width: "50%",
                marginRight: "0",
              },
            ],
          },
          {
            x: 0,
            y: 7,
            w: 6,
            h: 1,
            i: "12",
            label: "卸货港",
            type: "label_multiple_input",
            options: [
              {
                prop: "dischargePortCode",
                disabled: true,
                width: "calc(50% - 5px)",
                marginRight: "5px",
              },
              {
                prop: "dischargePortName",
                disabled: true,
                width: "50%",
                marginRight: "0",
              },
            ],
          },
          {
            x: 0,
            y: 8,
            w: 6,
            h: 1,
            i: "13",
            label: "目的港",
            type: "label_multiple_input",
            options: [
              {
                prop: "deliveryPortCode",
                disabled: true,
                width: "calc(50% - 5px)",
                marginRight: "5px",
              },
              {
                prop: "deliveryPortName",
                disabled: true,
                width: "50%",
                marginRight: "0",
              },
            ],
          },
          {
            x: 0,
            y: 11,
            w: 6,
            h: 1,
            i: "36",
            label: "ETA/ATA",
            type: "label_multiple_date",
            options: [
              {
                prop: "estimatedTimeArrivalDischarge",
                disabled: true,
                format: "YYYY-MM-DD",
                valueFormat: "YYYY-MM-DD",
                dateType: "date",
                width: "calc(50% - 5px)",
                marginRight: "5px",
              },
              {
                prop: "actualTimeArrivalDischarge",
                disabled: true,
                format: "YYYY-MM-DD",
                valueFormat: "YYYY-MM-DD",
                dateType: "date",
                width: "50%",
                marginRight: "0",
              },
            ],
          },
          {
            x: 0,
            y: 11,
            w: 6,
            h: 1,
            i: "14",
            label: "ETA/ATA",
            type: "label_multiple_date",
            options: [
              {
                prop: "estimatedTimeArrivalDelivery",
                disabled: true,
                format: "YYYY-MM-DD",
                valueFormat: "YYYY-MM-DD",
                dateType: "date",
                width: "calc(50% - 5px)",
                marginRight: "5px",
              },
              {
                prop: "actualTimeArrivalDelivery",
                disabled: true,
                format: "YYYY-MM-DD",
                valueFormat: "YYYY-MM-DD",
                dateType: "date",
                width: "50%",
                marginRight: "0",
              },
            ],
          },
          {
            x: 0,
            y: 0,
            w: 6,
            h: 1,
            i: "16",
            label: "开港时间",
            prop: "portOpeningTime",
            type: "label_date",
            placeholder: "请选择开港时间",
            dateType: "date",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD",
            disabled: true,
          },
          {
            x: 6,
            y: 2,
            w: 6,
            h: 1,
            i: "17",
            label: "装柜时间",
            prop: "estimatedStuffingTime",
            type: "label_date",
            placeholder: "请选择预计装柜时间",
            format: "YYYY-MM-DD",
            valueFormat: "YYYY-MM-DD",
            dateType: "date",
          },
          {
            x: 12,
            y: 0,
            w: 6,
            h: 1,
            i: "18",
            label: "截单时间",
            prop: "shippingInstructionCutoffTime",
            type: "label_date",
            placeholder: "请选择截单时间",
            format: "YYYY-MM-DD HH:mm",
            valueFormat: "YYYY-MM-DD HH:mm",
          },
          {
            x: 12,
            y: 0,
            w: 6,
            h: 1,
            i: "19",
            label: "截重时间",
            prop: "containerYardClosingTime",
            type: "label_date",
            placeholder: "请选择截重时间",
            format: "YYYY-MM-DD HH:mm",
            valueFormat: "YYYY-MM-DD HH:mm",
          },
          {
            x: 12,
            y: 0,
            w: 6,
            h: 1,
            i: "20",
            label: "截关时间",
            prop: "customsClosingTime",
            type: "label_date",
            placeholder: "请选择截关时间",
            format: "YYYY-MM-DD HH:mm",
            valueFormat: "YYYY-MM-DD HH:mm",
          },
          {
            x: 12,
            y: 0,
            w: 6,
            h: 1,
            i: "21",
            label: "截货时间",
            prop: "cargoReceivingCutoffTime",
            type: "label_date",
            placeholder: "请选择截货时间",
            format: "YYYY-MM-DD HH:mm",
            valueFormat: "YYYY-MM-DD HH:mm",
          },
          {
            x: 12,
            y: 0,
            w: 6,
            h: 1,
            i: "22",
            label: "截VGM时间",
            prop: "verifiedGrossMassCutoffTime",
            type: "label_date",
            placeholder: "请选择截VGM时间",
            format: "YYYY-MM-DD HH:mm",
            valueFormat: "YYYY-MM-DD HH:mm",
          },
          {
            x: 6,
            y: 3,
            w: 6,
            h: 1,
            i: "23",
            label: "订舱代理",
            prop: "bookingProviderCode",
            type: "remote_select",
            placeholder: "请选择订舱代理",
            params: {
              searchKey: "keyword",
              keyValue: "customerCode",
              name: "customerNameZh",
              abbreviation: "customerCode",
              showCustomizedOption: true,
              displayKey: {
                coopTypeStr: "coopTypeStr",
                customerAbbr: "customerAbbr",
              },
              fixedParams: {
                coopType: "1",
              },
            },
            paramsKey: {
              bookingProviderName: "customerNameZh",
            },
            apiModule: api.default.common.customers.selectAllCoopList,
          },
          {
            x: 6,
            y: 5,
            w: 6,
            h: 1,
            i: "25",
            label: "箱量",
            prop: "containerNumber",
            type: "label_input_select",
            placeholder: "请输入箱量",
            selectProp: "containerCode",
            props: {
              label: "containerCode",
              value: "containerCode",
            },
            options: [],
          },
          {
            x: 6,
            y: 5,
            w: 6,
            h: 1,
            i: "26",
            label: "预估海运费/币别",
            prop: "oceanFreight",
            type: "label_input_select",
            placeholder: "请输入预估海运费",
            selectProp: "currencyCode",
            name: "currencyName",
            options: [],
            props: {
              value: "subCode",
              label: "subName",
            },
          },
          {
            x: 6,
            y: 6,
            w: 6,
            h: 1,
            i: "38",
            label: "成本价格/币别",
            prop: "costAmount",
            selectProp: "costCurrency",
            type: "label_input_select",
            options: [],
            props: {
              label: "subName",
              value: "subName",
            },
          },
          {
            x: 6,
            y: 7,
            w: 6,
            h: 1,
            i: "28",
            label: "货物类型",
            prop: "goodsTypeCode",
            name: "goodsTypeName",
            options: [],
            props: {
              value: "subCode",
              label: "subName",
            },
            type: "label_select",
          },
          {
            x: 6,
            y: 8,
            w: 6,
            h: 1,
            i: "29",
            label: "UN编码",
            prop: "unCode",
            name: "unName",
            options: [],
            props: {
              value: "subCode",
              label: "subName",
            },
            type: "label_select",
          },
          {
            x: 6,
            y: 8,
            w: 6,
            h: 1,
            i: "41",
            label: "件数",
            prop: "pcs",
            type: "label_number",
          },
          {
            x: 6,
            y: 8,
            w: 6,
            h: 1,
            i: "39",
            label: "毛重",
            prop: "weight",
            type: "label_number",
          },
          {
            x: 6,
            y: 8,
            w: 6,
            h: 1,
            i: "40",
            label: "体积",
            prop: "volume",
            type: "label_number",
          },
          {
            x: 6,
            y: 0,
            w: 6,
            h: 1,
            i: "30",
            label: "SO号",
            prop: "soNo",
            disabled: true,
            type: "label_input",
          },
          {
            x: 18,
            y: 0,
            w: 6,
            h: 1,
            i: "31",
            label: "收货人",
            prop: "consigneeCode",
            type: "label_input_textarea_autocomplete",
            options: [],
            labelKey: {
              customerCode: "customerCode",
              customerNameZh: "customerNameZh",
              countryName: "countryName",
              provinceName: "provinceName",
              cityName: "cityName",
              areaName: "areaName",
            },
          },
          {
            x: 18,
            y: 0,
            w: 6,
            h: 1,
            i: "33",
            label: "发货人",
            prop: "shiperCode",
            type: "label_input_textarea_autocomplete",
            options: [],
            labelKey: {
              customerCode: "customerCode",
              customerNameZh: "customerNameZh",
              countryName: "countryName",
              provinceName: "provinceName",
              cityName: "cityName",
              areaName: "areaName",
            },
          },

          {
            x: 18,
            y: 0,
            w: 6,
            h: 1,
            i: "35",
            label: "通知人",
            prop: "notifyCode",
            type: "label_input_textarea_autocomplete",
            options: [],
            labelKey: {
              customerCode: "customerCode",
              customerNameZh: "customerNameZh",
              countryName: "countryName",
              provinceName: "provinceName",
              cityName: "cityName",
              areaName: "areaName",
            },
          },
        ],
      },
    ],
  },
]);
const rules = ref({
  customerCode: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  containerTypeCode: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  scheduleNo: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  containerCode: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  containerNumber: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  goodsTypeCode: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  unCode: [
    {
      validator(rule, value) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            if (formData.value.goodsTypeCode === "024003" && !value) {
              reject(new Error());
            } else {
              resolve();
            }
          }, 0);
        });
      },
      trigger: ["blur", "change"],
    },
  ],
  estimatedStuffingTime: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
});
const saveBtnLoading = ref(false);
onMounted(() => {
  onGetSub();
  if (route.query.id) {
    getInfo();
  }
});
const onGetSub = async () => {
  const { rows } = await api.default.common.boxType.list({
    pageSize: 999,
  });
  columnFilters(formColumns.value, "containerNumber").options = rows;
  getSubZhEn({
    code: "023,003,024,028",
  }).then((res) => {
    columnFilters(formColumns.value, "containerTypeCode").options = res["023"];
    columnFilters(formColumns.value, "oceanFreight").options = res["003"];
    columnFilters(formColumns.value, "costAmount").options = res["003"];
    columnFilters(formColumns.value, "goodsTypeCode").options =
      res["024"] || [];
    columnFilters(formColumns.value, "unCode").options = res["028"];
  });
};
const getInfo = async () => {
  saveBtnLoading.value = true;
  try {
    const { data } = await api.default.oceanFreight.bookingManagement.getInfo(
      route.query.id
    );
    formData.value = {
      ...data,
      soNo: data.detailsList?.map((item) => item.soNo).join(","),
    };
    saveBtnLoading.value = false;
  } catch (err) {
    saveBtnLoading.value = false;
  }
};
const customerGetInfo = (val) => {
  api.default.common.customers
    .getInfoByCode({
      code: val,
    })
    .then((res) => {
      const sendList =
        res.data.coopList.filter(
          (item) => item.coopCustomerTypeCode === "019001"
        ) || [];
      const harvestList =
        res.data.coopList.filter(
          (item) => item.coopCustomerTypeCode === "019002"
        ) || [];
      const throughList =
        res.data.coopList.filter(
          (item) => item.coopCustomerTypeCode === "019003"
        ) || [];
      columnFilters(formColumns.value, "shiperCode").options = sendList;
      columnFilters(formColumns.value, "consigneeCode").options = harvestList;
      columnFilters(formColumns.value, "notifyCode").options = throughList;
    });
};
const onSubmit = () => {
  const parmas = {
    ...formData.value,
  };
  if (!route.query.id) {
    // 新增
    saveBtnLoading.value = true;
    api.default.oceanFreight.bookingManagement
      .add({
        ...parmas,
      })
      .then(() => {
        ElMessage.success("新增成功");
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  } else {
    // 编辑
    saveBtnLoading.value = true;
    api.default.oceanFreight.bookingManagement
      .edit(parmas)
      .then(() => {
        ElMessage.success("修改成功");
        saveBtnLoading.value = false;
        emits("onSubmit");
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  }
};
</script>
<style lang="scss" scoped>
.search-btn {
  width: 120px;
  margin: 20px auto 0;
}
</style>
